/*
	Theme Name: CleanPixel
	Author: 某某
	Author URI: https://www.domain.com  
	Version: 2.1
	Date: 2018-12-29
	Copyright: This theme is designed to be used only with a valid license of 某某短域名系统 and cannot be resold or reused in any other applications without prior consent from the author. You are however free to customize this theme for your own purpose. Please contact the author, if needed, to clarify.

	This file and formating is used to identify each theme and provide information about the author and version. Keep the formating as clean as possible.
*/

// Colors
@blue: #0067F4;
@secondary: #2148b1;
@green: #82e26f;
@red: #fd0035 ;
@black: #293441;
@yellow: #FFB400;
@violet: #9C27B0;
@body_color: #fff;
@header_color: @black;
@calltoaction: #e8e8e8;

@header: #fff;
@hero: @blue;
@mainForm: #fff;
@content_bg: #fff;

@facebook_button: #3B5998;
@twitter_button: #409DD5;
@google_button: #D34836;

// Body
body{
	background-color: #f3f3f3;
	font-size: 13px;
	min-height: 100%; 
	iframe[src="about:blank"]{
		display:none;
	}
	a{
		color: @black;
		text-decoration: none;
		&:hover{
			color: lighten(@blue, 10%);
			text-decoration: none;
		}
		&:active, &:focus{
			text-decoration: none;
		}
		&#back-to-top {
		  display: none;
		  position: fixed;
		  z-index: 9999;
		  bottom: 10px;
		  right: 10px;
		  background: @black;
		  color: #fff;
		  font-weight: 700;
		  padding: 2px 8px;
		  font-size: 12px;
		  text-decoration: none;
			box-shadow: 0 0px 15px rgba(0,0,0,0.3);		  
			.border-radius();
		}	
	}
	p{
		&.featureP{
			max-width: 650px;
			margin: 0 auto;
			font-size: 18px;
			line-height: 30px;
			color: lighten(@black, 35%);
		}
	}
	.label{
		padding: 2px 8px;
		.border-radius(3px);
		.label-success{
			background: @green;
			color: #fff;
		}
	}
	pre{
		margin: 30px 0;
		span{
			display: block;
			line-height: 25px;
			&.m-x-3{
				line-height: 30px;
				color: @black;
			}
			&.m-x-4{
				margin-left: 15px;
				color: @violet;
			}
			&.m-x-5{
				margin-left: 35px;
				color: @blue;
			}
			&.m-x-6{
				margin-left: 50px;
				font-weight: 700;
				color: @black;
			}							
		}
	}
	.nav > li > a:hover, .nav > li >a:focus {
		background: transparent;
		outline: none;
	}
	.form-group{
		&.has-danger{
			color: @red;
			label{
				color: @red;
			}
			input{
				border-color: @red;
			}
		}
	}
	.chart{
		height: 400px;
	}		
	input,button{
		outline: none !important;
		box-shadow:none !important; 
		-webkit-appearance:none;
	}
	.label-block{
		width: 100%;		
	}
	.form-horizontal{
		margin-top: 30px;
		label.control-label{
			text-align: left;
			color: @black;
		}
	}
	.rand {
		position: relative;
		min-height: 300px;
		& > div{
			position: absolute;
			text-align: center;
			i {
		    color: #fff;
				background-color: @blue;
				background-image: -moz-linear-gradient(45deg, @violet 0%, @blue 100%);
		    background-image: -webkit-linear-gradient(45deg, @violet 0%, @blue 100%);
		    background-image: -ms-linear-gradient(45deg, @violet 0%, @blue 100%);			    
		    margin-bottom: 30px;
		    padding: 20px;
		    border-radius: 100px;
		    -moz-border-radius: 100px;
		    -webkit-border-radius: 100px;
		    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
		    font-size: 3.5em;
		  }
		}
		.rand1 {
		  top: 10%;
		  left: 40%;
		  i{
				background-color: @red;
				background-image: -moz-linear-gradient(45deg, @violet 0%, @red 100%);
		    background-image: -webkit-linear-gradient(45deg, @violet 0%, @red 100%);
		    background-image: -ms-linear-gradient(45deg, @violet 0%, @red 100%);				  	
		  }
		}
		.rand2 {
		  top: 60%;
		  i{
				background-color: @yellow;
				background-image: -moz-linear-gradient(45deg, @red 0%, @yellow 100%);
		    background-image: -webkit-linear-gradient(45deg, @red 0%, @yellow 100%);
		    background-image: -ms-linear-gradient(45deg, @red 0%, @yellow 100%);				  	
		  }		  
		}
		.rand3 {
		  left: 70%;
		  top: 5%;
		}		
		.rand4 {
	    top: 69%;
	    left: 30%;
		  i{
				background-color: @green;
				background-image: -moz-linear-gradient(45deg, @blue 0%, @green 100%);
		    background-image: -webkit-linear-gradient(45deg, @blue 0%, @green 100%);
		    background-image: -ms-linear-gradient(45deg, @blue 0%, @green 100%);				  	
		  }		  
		}		
		.rand6 {
		  top: 62%;
		  left: 68%;
		  i{
				background-color: @green;
				background-image: -moz-linear-gradient(45deg, @yellow 0%, @green 100%);
		    background-image: -webkit-linear-gradient(45deg, @yellow 0%, @green 100%);
		    background-image: -ms-linear-gradient(45deg, @yellow 0%, @green 100%);				  	
		  }			  
		}		
	}	
	.ads{
		margin: 10px auto;
		small{
			margin:5px;
			display: block;
		}
		&.ad_468{
			max-width: 468px;
		}
		&.ad_728{
			max-width: 728px;
		}
		&.ad_300{
			max-width: 300px;
		}
		img{
			width: 100% !important;
		}	
	}	
	.alert{
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
		.border-radius(50px);

		&.no-round{
			.border-radius(3px);
		}
		&.alert-info{
			color: #fff !important;
		}
		&.alert-success{
			background: @green;
			border-color: darken(@green, 5%);			
		}		
		&.alert-danger{
			background: @red;
			border-color: darken(@red, 5%);			
		}
		&.alert-warning{
			background: @yellow;
			border-color: darken(@yellow, 5%);
		}
	}
	.label{
		&.label-secondary{
			background:lighten(@black,70%);
			color: lighten(@black,80%);
		}
	}
	.panel{
		h4,h5{
			margin-bottom: 15px;
		}
	}
	.panel-dark{
		background: @black;
		border-color: transparent;
		color: #fff !important;
		h3,p,li{
			color: #fff !important;
		}		
		.panel-heading{
			background: lighten(@black, 5%);
			color: #fff !important;
			border-bottom-color:transparent;
			a{
				color: #fff !important;
				padding: 2px 8px;
				background: @blue;
				font-size: 12px;
				font-weight: 700;
				.border-radius;				
			}
		}
	}	
	.icon-green{
		color: @green;
	}
	.icon-red{
		color: @red;
	}
	.inline-copy {
		position: relative;
		background: #008aff;
		color: #fff !important;
		text-decoration: none;
		font-size: 11px;
		top: -2px;
		margin-left: 2px;
		padding: 0 3px 1px;
		border: 1px solid #0078de;
		.border-radius;
		&:before {
			right: 100%;
			top: 50%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-color: rgba(0, 120, 222, 0);
			border-right-color: #0078de;
			border-width: 4px;
			margin-top: -4px;	
		}	
	}
	.alert{
		span{
			display: block;
		}
	}
	#device{
		.row, p{
			margin-top: 5px;
		}
	}
	#tooltip {
	  display: block;
	  background: @black;
	  color: #fff;
	  padding: 5px 10px;
	  max-width: 300px;
	  z-index: 100;
	  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
	  border-radius: 2px;
	  -moz-border-radius: 2px;
	  -webkit-border-radius: 2px;
	}
	.slideup{
		display:none;
	}
	.pace .pace-progress {
	  background: @blue;
	  position: fixed;
	  z-index: 2000;
	  top: 0;
	  left: 0;
	  height: 2px;
  	box-shadow: 0 0 1px darken(@blue, 5%);
	  -webkit-transition: width 1s;
	  -moz-transition: width 1s;
	  -o-transition: width 1s;
	  transition: width 1s;
	}

	.pace-inactive {
	  display: none;
	}	

	select.filter{
		dispaly: none;
	}
	&.light{
		background-color: #fff;
		section{
			padding: 100px 0;
		}
	}	

	.stripe-button-el{
		background-color: @blue;
		background-image: -moz-linear-gradient(45deg, @violet 0%, @blue 100%);
    background-image: -webkit-linear-gradient(45deg, @violet 0%, @blue 100%);
    background-image: -ms-linear-gradient(45deg, @violet 0%, @blue 100%);				
    border: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
		.border-radius(100px);
		&:hover{
			opacity: 0.9;
		}
		&:active,&:focus{
			background: darken(@violet, 15%) !important;
			box-shadow: 0;
		}
		span{
			box-shadow: none;
			text-shadow: none;
			border: 0;
			background: transparent !important;
		}
	}
}


// Headings
h3{
	&.featureH{
		color: @black;
		font-size: 35px;
		margin: 40px 0;
		font-weight: 700;
	}
}

// Header
header{
	background: @header;
	min-height: 85px;
	border: 0;
	.navbar{
		margin-bottom: 0;
		.navbar-toggle{
			background-color: @black;
			color: @black;
		}
		.navbar-header{
			.glyphicon{
				color: #fff;
			}
			margin-top: 15px;
			.navbar-brand{			
				font-size: 1.8em;
				font-weight: 700;
				color: @black;
			}
			img{
				max-height: 60px;
				margin-top: -17px;
			}			
		}
		.nav{
			margin-top: 25px;
			li{
				margin-left: 30px;
				a{
					font-weight: 700;
					color: @black;
					padding: 8px 15px;
					&:hover{
						background-color: transparent;			
						color: #000;
						border-bottom: 3px 	solid #000;
					}
					&.active{
						color: #fff;
						border: 0;
						background-color: @red;
						background-image: -moz-linear-gradient(45deg, @red 0%, @violet 100%);
				    background-image: -webkit-linear-gradient(45deg, @red 0%, @violet 100%);
				    background-image: -ms-linear-gradient(45deg, @red 0%, @violet 100%);									
						.border-radius(100px);
						box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
						&:hover{
							box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
						}	
						&:focus, &:active{
							box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2);
						}
					}
				}
			}
		}
	}
	&.app{
		min-height: 65px;
		background: #fff;
		border-bottom: 1px solid #d4d7df;
		.navbar{
			.navbar-header{
				margin-top: 5px;
				.navbar-brand{			
					font-size: 1.2em;
					color: @black;
					img{
						max-height: 45px;
						margin-top: -10px;
					}						
				}	
			}
			.nav{
				margin-top: 15px;
				li{
					margin-right: 10px;				
					a{
						padding: 5px 8px;
						color: @black;	
						&:hover{
							background-color: transparent;			
							color: @black;
							border-bottom: 3px solid @blue;
						}	
						&.active{
							background-color: @blue;
							color: #fff;
							border: 0;
							.border-radius(100px);
							&:hover{
								color: #fff;
							}	
						}																
					}
				}
			}
		}
	}	
}

.home {
	position: relative;
	header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
    background: transparent;		
		.navbar{
			margin-bottom: 0;
			.navbar-toggle{
				background-color: @black;
				color: #fff;
			}
			.navbar-header{
				margin-top: 15px;
				.navbar-brand{			
					font-size: 1.8em;
					font-weight: 700;
					color: #fff;
				}
				img{
					max-height: 60px;
					margin-top: -17px;
				}			
			}
			.nav{
				margin-top: 25px;
				li{
					margin-left: 30px;
					a{
						font-weight: 700;
						color: #fff;
						padding: 8px 15px;
						&:hover{
							background-color: transparent;			
							color: #fff;
							border-bottom: 3px 	solid #fff;
						}
						&.active{
							background: #fff;
							color: @black;
							border: 0;
							.border-radius(100px);
							&:hover{
								color: @black;
							}	
						}
					}
				}
			}
		}    
  }
  section.hero{
    padding: 250px 0;  	
		background-color: #4f37ac;
    background-image: -moz-linear-gradient(0deg, #0854a9 0%, #4f37ac 100%);
    background-image: -webkit-linear-gradient(0deg, #0854a9 0%, #4f37ac 100%);
    background-image: -ms-linear-gradient(0deg, #0854a9 0%, #4f37ac 100%);  	
    position: relative;
    .container{
    	position: relative;
    	z-index: 99;
    }
		svg#wave {
		    position: absolute;
		    bottom: 0;
		    z-index: 0;
		}    
  }
  #main-form{
		box-shadow: 0 13px 0px -10px rgba(255,255,255,0.2), 0 26px 0px -20px rgba(255,255,255,0.2), 0 10px 200px rgba(0, 0, 0, 0.15);
  }
}	

// Section
section{
	&.rounded{
		.border-radius(10px);
	}
	&.wshadow{
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	}
	&.urls-holder{
		padding: 50px 0 100px;
		.url-list{
			padding: 15px !important;
			min-height: 93px;
			border-bottom: 0;
			margin-bottom: 20px;
			clear: both;
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
			.border-radius(5px);	
		}				
	}

	&.hero{
		background: @hero;
		border: 0;
		padding: 100px 0;
		position: relative;
		.moreto{
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: -10px;
			i{
				background: @hero;
				padding: 10px;
				color: lighten(@hero, 35%);
				font-size: 25px;
				.border-radius(100px);				
			}
		}		
	}
	&.calltoaction{
		background: darken(@secondary, 38%);
		padding: 0 0 50px 0 !important;
		position: relative;
		.actionbar{
			width: 100%;
			max-width: 600px;
			margin: auto;
			background: #fff;
			padding: 20px 10px;
			box-shadow: 8px 5px 20px rgba(0,0,0,0.15);
	    position: relative;
	    top: -4rem;			
			text-align: center;
			.border-radius(5px);
			h2{
				font-size: 18px;
				font-weight: 700;
				margin-bottom: 20px;
				line-height: 30px;
			}
		}
	}
	.feature{
		margin: 100px 0;	
		color: @black;
		h2{
			font-weight: 700;
			color: @black;
			font-size: 22px;
			i{
				background: #fff;
				color: @secondary;
				margin-bottom: 30px;				
				padding: 20px;
				.border-radius(100px);
				box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
			}
			span{
		    color: @green;
	  		border-bottom: 4px solid #293441;				
			}
			small{
				display: block;
				font-size: 15px;
				color: #95A2A8;
				margin-bottom: 5px;				
				font-weight: 700;				
			}
		}
		img{
			.border-radius(2px 2px 0 0);
			max-width: 655px;
			width: 100%;
		}
		.info{
			padding-bottom: 10px;
		}
		p{
			margin: 15px 0;
			font-size: 15px;
			line-height: 25px;
			color: #333333;
		}
	}

	.featurette{
		padding: 30px 0 150px;
		& > div{
			text-align: center;
			color: @black;			
			.glyphicon{
				background: transparent;
				color: lighten(@secondary, 20%);
				font-size: 3.5em;
				padding: 20px 20px 20px 22px;
				.border-radius(3px);
				.transition;
			}
			h3{
				margin-top: 15px;
				margin-bottom: 20px;
				color: @black;
				font-size: 18px;
				position: relative;
				&:after{
					display: block;
					margin: 10px auto 0;
					content: " ";
					width: 20px;
					height: 3px;
					background: lighten(@secondary, 30%);
					.border-radius(100px);
				}
			}
		}
	}

	.panelette{
		background: #fff;
		box-shadow: 0 25px 100px rgba(0, 0, 0, 0.1);
		padding: 25px;
		margin: 0 20px;
		.border-radius(5px);
		h3{
			color: @black;
			font-size: 16px;
			i{
				padding: 10px;
				margin-right: 5px;
				color: @blue;
				background: rgba(0, 0, 0, 0.08);
				font-size: 25px;
				vertical-align: middle;
				.border-radius(100px);
			}
		}
		p{
			color: lighten(@black, 20%);
		}
		&.panelette-grad{
			.gradient(@blue,@secondary, 45deg);
			h3{
				color: #fff;
				i{
					color: #fff;
				}
			}
			p{
				color: #fff;
			}
		}
	}

	.stats{
		padding: 30px 0;
		text-align: center;
		h2{
			color: #fff;
			font-size: 2em;
			margin-bottom: 50px;
		}
		h3{
			font-size: 3em;
			color: #fff;			
			span{
				font-size: 0.5em;
			}
		}
		strong{
			font-size: 1.1em;
			color: #fff;
			margin-bottom: 20px;
			display: block;
		}
	}
	.promo{
		margin: 50px 0;
		color: #fff;		
		h1{
			text-align: center;
			.description{
				color: #fff;
				margin-top: 20px;
				display: block;
				font-size: 18px;
			}
		}
	}
	.call-to-action{
		text-align: center;
		margin: 40px 0;
		span{
			color: #788991;
			display: block;
			font-size: 16px;
			font-weight: 500;
			margin-bottom: 15px;
		}
		.btn{
			width: 30%;
		}
	}
	.public_list{
		h2{
			font-size: 20px;
			color: #788991;
			margin-bottom: 20px;
		}
	}
	&.dark{
		min-height: 30px;
		background-color: @black;
		color: #fff;
		h3{
			color: #fff !important;
		}
		.feature{	
			color: #fff;
			h2{
				color: #fff;
				small{
					display: block;
					color: lighten(@black, 30%);
				}
			}
		}	
		.breadcrumb{
			background: transparent;	
			padding-top: 30px;
			li{
				font-size: 25px;
				color: #fff;
				a{
					color: #fff;
				}
			}
		}				
	}	
	&.light{
		min-height: 30px;
		background-color: #f8f8f8;
		color: @black;			
	}
	&.red{
		min-height: 30px;
		background-color: @red;
		background-image: -moz-linear-gradient(45deg, @red 0%, @violet 100%);
    background-image: -webkit-linear-gradient(45deg, @red 0%, @violet 100%);
    background-image: -ms-linear-gradient(45deg, @red 0%, @violet 100%);				
		.feature{
			h2{
				color: #fff;
				small{
					color: #fff;
				}
			}
			p{
				color: #fff;
				opacity: 0.8;
			}
			img{
				margin-top: 30px;
				.border-radius(5px);
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
			}
		}
		.promo{	
			h1{
				color: #fff;
				.description{
					color: lighten(@blue, 60%);
				}
			}
		}			
	}
	&.blue{
		min-height: 30px;
		background-color: @blue;
		background-image: -moz-linear-gradient(45deg, @violet 0%, @blue 100%);
    background-image: -webkit-linear-gradient(45deg, @violet 0%, @blue 100%);
    background-image: -ms-linear-gradient(45deg, @violet 0%, @blue 100%);				
		color: #fff;
		.feature{
			h2{
				color: #fff;
				small{
					color: #fff;
				}
			}
			p{
				color: #fff;
				opacity: 0.8;
			}
			img{
				margin-top: 30px;
				.border-radius(5px);
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
			}
		}
		.promo{	
			h1{
				color: #fff;
				.description{
					color: lighten(@blue, 60%);
				}
			}
		}			
	}	
	&.yellow{
		min-height: 30px;
		background-color: @yellow;
		color: #fff;
		.promo{	
			h1{
				color: #fff;
				.description{
					color: lighten(@yellow, 60%);
				}
			}
		}			
	}	
	&.green{
		min-height: 30px;
		background-color: @green;
		color: #fff;
		.promo{	
			h1{
				color: #fff;
				.description{
					color: lighten(@green, 60%);
				}
			}
		}			
	}
	&.break{
		border-bottom: 1px solid #eee;
	}
	&.bg{
		min-height: 30px;
		background-color: transparent;
		background-size:100% 100% !important;	
		background-repeat: no-repeat;		
		color: #fff;
		h1{
			text-shadow: 1px 1px 1px @black;
			.description{
				color: #fff !important;
				opacity: 0.8;
			}
		}
	}
	// Sidebar
	.sidebar{
		padding-top: 30px;
		padding-bottom: 30px;
		min-height: 900px;	
		background: #fff;
		border-right: 1px solid #d4d7df;
		height: calc(100vh);
		.navbar-brand{
			color: @black;
		}
		.nav-sidebar{
			li{
				margin-bottom: 5px;
				&.locked {
					a{
						color: lighten(@black, 30%);
						&:hover{
							background: lighten(@black, 50%);
							box-shadow: none;
						}
					}
				}
			}
			a{
				color: @black;
				span{
					margin-right: 8px;
				}
				&:hover,&.active{
					color: #fff;
					background: @blue;
					box-shadow: 0 2px 10px lighten(@blue, 42%);
					.border-radius(100px);
				}				
			}
		}		
		h3{						
			color: lighten(@black, 30%);
			font-size: 14px;
			font-weight: 700;
			margin-top: 20px;
			margin-left: 15px;			
			margin-bottom: 15px;
		}
		.side-stats{
			text-align: left;
			margin-top: 5px;
			margin-left: 15px;	
			color: lighten(@black, 45%);
			span{
				color: @black;
				font-weight: 700;
			}
		}	
		.progress{
			height: 10px;
			.border-radius()
		}			
	}
	// Content
	.content{
		// User Content
		#user-content{			
			.alert{
				margin-top: 30px !important;
				.border-radius(3px);
			}
		}
		.main-content{
			margin-top: 30px;
			// Toolbox
			.toolbox{
				color: @black;
				background: #fff;
				border-bottom: 1px solid darken(@body_color, 10%);
				padding: 15px;
				margin-bottom: 10px;
				.border-radius(2px 2px 0 0);
				// Search
				#search{
					input{
						border-left-width: 0;
						padding-left: 0;
					}

				}			
			}
			#data-container{
				&>.btn-group{
					padding: 5px 15px 15px;
				}
				.pagination{
					padding: 15px;
				}			
			}
		}	
		// URL List
		.url-list{
			padding:10px 5px;
			min-height: 93px;
			border-bottom: 1px solid darken(@content_bg,10%);
			clear: both;
			&:last-child{
				border-bottom: 0;
			}
			.description{
				padding-left: 15px;
				color: #666;
			}
			ul.toggle{
				padding-left: 15px;
				li{
					list-style: none;
					display: inline-block;
					&>div{
						margin-top: -2px;
					}
					a,span{
						margin: 0;
						font-size: 12px;
						font-weight: 700;
						padding: 8px 8px;
						color: #888;
					}
					.dropdown{
						text-align: left;										
						position: absolute;
						z-index: 999;
						background: @blue;
						min-width: 140px;
						display: none;
						margin-left: 0px;
						padding: 8px;
				    box-shadow: 0 10px 15px rgba(0,0,0,0.15);						
						.border-radius(3px 0 3px 3px);
						a{
							display: block;
							color: #fff;
							font-weight: 700;
							padding: 5px;
							.transition(padding,0.1s);
							&:hover{
								padding-left: 8px;									
							}
						}
					}
					&:hover{
						&>a{
							color: @blue;
						}
						&>a.drop{
							background: @blue;
							color: #fff;
							.border-radius(2px 2px 0 0)
						}										
						.dropdown{
							display: block;
						}
					}
				}
			}							
			.url-info{
				.title{
					padding-left: 15px;
					margin-bottom: 10px;
					font-size: 1.2em;
					white-space: -moz-pre-wrap !important;
					white-space: -pre-wrap;
					white-space: -o-pre-wrap;
					white-space: pre-wrap;
					word-wrap: break-word;
					word-break: break-all;
					white-space: normal;								
					img{
						margin-right: 5px;
						vertical-align: top;
					}
				}
				.short-url{		
					color: darken(@content_bg,50%);
					font-size: 12px;
					padding-left: 15px;		
					margin: 8px 0;					
					a{
						color: darken(@content_bg,50%);
					}
				}
				.info{
					color: darken(@content_bg,50%);
					font-size: 12px;
					padding-left: 25px;
					span{
						margin-right: 10px;
					}
					.qr{
						padding: 5px 5px 2px 5px;
						img{
							width: 16px;
						}
					}
				}
			}
			.url-stats{
				text-align: center;
				strong{
					font-size: 25px;
					display: block;
				}										
			}
			&.fix{
				padding-left: 0;
				padding-right: 0;
				.description{
					padding-left: 0;
				}
				.url-info{
					.title{
						padding-left: 0;							
					}
					.short-url{		
						padding-left: 0;		
					}
				}				
			}			
		}						
		// Bundles
		&.bundles{
			&.list-group{
				a.active{
					color: @blue;
				}
				.list-group-item{
					padding-left: 0;
					padding-right: 0;
				}
				p{
					color: #999;
					font-weight: 700;
					font-size: 12px;
					a{
						color: #555;
					}
				}
				h4{
					margin-bottom: 8px;
				}
			}
		}		
		// Widgets
		#widgets{
			padding-top: 30px;
			ul{
				margin-top: 15px;
				padding:0;
				li{
					color: #555;
					border-bottom: 1px solid #eee;
					padding-bottom: 10px;
					margin-top: 10px;
					font-size: 12px;
					list-style: none;
					&.new_item{
						background: #eee;
						padding: 5px 5px 12px;
						.border-radius;
					}
					img{
						margin-right: 5px;
					}
					a{
						font-weight: 700;
						color: @blue;
					}
					span{
						color: #999;
						margin-left: 5px;
					}
				}
			}			
		}
		// Ajax
		.return-ajax{
			position: relative;
			.clear-search{
				position: absolute;
				top: -45px;
				right: 10px;
			}
			.cta,.alert{
				overflow: hidden;
				margin:5px 15px;				
			}		
		}
		.panel{
			p{
				margin: 10px 0;
			}
			h3{
				font-size: 15px;
				margin-top: 0;
				color: #999;
				font-weight: 700;
				a{
					margin-top: -2px;
				}
			}
			.nav{
				li.active, li:hover{
					a{
						background: @blue;						
						color: #fff;
					}
				}
			}
		}
		p{
			color: #777;
			em{
				font-size: 1.3em;
				font-style: normal;
				font-weight: 700;
			}
			&.center{
				text-align: center;
				font-weight: 700;
			}		
		}
		.avatar-holder{
			text-align: left !important;
			padding: 0 15px;
			.avatar{
				max-width: 48px;
				.border-radius;
			}
			strong{
				padding-top: 2px;
				margin-left: 15px;
				display: block;
				font-size: 1.2em;
			}
			span{
				margin-left: 15px;
			}
		}
	}
	// Centered Content
	.centered{
		margin: 100px auto 30px;
		.site_logo{
			margin-top: 50px;
			margin-bottom: 50px;
			text-align: center;
			background: transparent;
			a{
				color: @black;
				font-size: 30px;
			}
			img{
				max-height: 80px;				
				background: transparent;
				.border-radius;
			}
		}		
		&.form{
			max-width: 450px;
			width: 100%;
			h2{
				
			}
			form.live_form{				
				padding: 30px 20px;
				background: @mainForm;
				border: 1px solid darken(@mainForm, 10%);
				.border-radius;
				box-shadow: 0 5px 20px rgba(0,0,0,0.1);				
			}
			.input-group,.form-group{
				margin-bottom: 25px;
			}
			#forgot{
				margin-top: 8px;
				font-size: 13px;
			}
			span.check-box{
				margin-left: 5px;
			}		
			label{
				width: 100%;
				a{
					font-size: 11px;
				}
			}
		}
		form.passform{			
			width: 100%;
			padding: 20px;			
		}		
		&.poll{
			max-width: 550px;
			width: 100%;
		}
	}	
	#forgot_form{
		display: none;
	}	
	h3{
		font-size: 16px;
		font-weight: 700;
		color: #999;
		margin-top: 0;
		margin-bottom: 15px;
	}	
	// Social
	.social{
		margin-bottom: 30px;
		padding-bottom: 15px;
		border-bottom: 1px solid #e0e0e0;
	}
	// Social Buttons
	.btn-facebook{
		background: @facebook_button;
		color: #fff;
		.transition;
		&:hover{
			background-color: lighten(@facebook_button, 10%)
		}
	}
	.btn-twitter{
		background: @twitter_button;
		color: #fff;
		.transition;
		&:hover{
			background-color: lighten(@twitter_button, 10%)
		}		
	}
	.btn-google{
		background: @google_button;
		color: #fff;
		.transition;
		&:hover{
			background-color: lighten(@google_button, 10%)
		}		
	}
	// 404 Page
	.is404{
		text-align: center;
		.border-radius;
		h1 {
			font-size: 250px!important;
			line-height: 250px!important;
			color: #fff;
		}
		h2 {
			text-transform: uppercase;
			font-size: 68px;
			color: #fff;
		}
		h3{
			text-transform: uppercase;
			font-size: 34px;	
			color: #fff;			
		}
	}	
	// Splash Page
	.splash{
		margin-top: 30px;
		.thumb{
			img{
				width: 100%;
				border: 1px solid #eee;
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
				.border-radius(5px);
			}
		}
		h2{
			color: #555;
			font-size: 22px;
		}
		p.description{
			color: #666;
		}
		p.disclaimer{
			margin-top: 20px;
			color: #aaa;
			font-size: 12px;
		}
	}
	// Media Page
	.media{
		padding-top: 30px;
		.embed iframe:not(.vine-embed),embed,object {
		  width: 100% !important;
		  height: 450px !important;
		}
		.embed iframe.vine-embed {
		  margin: 0 auto;
		}
		.info{
			border-bottom: 1px solid #e0e0e0;
			margin-bottom: 5px;
			padding-bottom: 5px;
			padding-top: 15px;
			h3{
				font-size: 16px;
				color: @black;
			}
			.text-right{
				font-size: 13px;
				span{
					display: block;
					padding-right: 10px;
					font-size: 22px;
					font-weight: 700;
				}
			}
		}
	}
	// Stats Page
	.stats-page{
		margin-top: 30px;
		.thumb{
			img{
				width: 100%;
				border: 1px solid #ccc;
				.border-radius;
			}
		}
		.url-info{
			h2{
				color: lighten(@black, 30%);
				font-size: 20px;
				span{
					margin-top: 10px;
					display: block;
					font-size: 13px;
				}
			}
		}
		.url-stats{
			max-height: 80px;
			padding-top: 20px;
			text-align: center;
			font-size: 26px;
			font-weight: 700;
			span{
				font-size: 13px;
				display: block;
			}
		}
	}
}

// Plan
section#plan{
	padding: 160px 0 190px;	
	h1{
		font-weight: 700;
		font-size: 3em;
	}

	.subtitle {
	  color: @black;
	  margin-top: 20px;
	}

	.toggle-container {
	  margin-bottom: 70px;
	}

	.toggle-container .switch-toggles {
	  position: relative;
	  width: 262px;
	  height: 50px;
	  border: 1px solid rgba(38, 39, 45, 0.2);
	  border-radius: 30px;
	  -moz-border-radius: 30px;
	  -webkit-border-radius: 30px;
	  margin: 25px auto;
	}

	.toggle-container .switch-toggles .monthly, .toggle-container .switch-toggles .yearly {
	  position: relative;
	  width: 130px;
	  float: left;
	  padding: 13px 10px;
	  text-align: center;
	  z-index: 2;
	  cursor: pointer;
	  font-size: 16px;
	  color: #8c8f94;
	  transition: color 0.7s cubic-bezier(0.545, 0, 0.05, 1);
	}

	.toggle-container .switch-toggles .monthly.active,
	.toggle-container .switch-toggles .yearly.active {
	  color: #26272d;
	}

	.toggle-container .switch-toggles:after {
	  position: absolute;
	  content: "";
	  width: 122px;
	  height: 42px;
	  background: #ffffff;
	  left: 3px;
	  top: 3px;
	  border-radius: 30px;
	  -moz-border-radius: 30px;
	  -webkit-border-radius: 30px;
	  box-shadow: 2.5px 4.33px 20px 0px rgba(61, 61, 62, 0.059);
	  -moz-box-shadow: 2.5px 4.33px 20px 0px rgba(61, 61, 62, 0.059);
	  -webkitbox-shadow: 2.5px 4.33px 20px 0px rgba(61, 61, 62, 0.059);
	  transition: all 0.7s cubic-bezier(0.545, 0, 0.05, 1);
	}

	.toggle-container .switch-toggles.active:after {
	  left: 135px;
	  top: 3px;
	}
	.corner-ribbon {
	    width: 200px;
			background-color: @blue;
			background-image: -moz-linear-gradient(180deg, @violet 0%, @blue 100%);
	    background-image: -webkit-linear-gradient(180deg, @violet 0%, @blue 100%);
	    background-image: -ms-linear-gradient(180deg, @violet 0%, @blue 100%);				    
	    top: 25px;
	    left: -50px;
	    text-align: center;
	    line-height: 50px;
	    letter-spacing: 1px;
	    color: #f0f0f0;
	    position: absolute;
	    box-shadow: 0 0 3px rgba(0,0,0,.3);
	    top: 25px;
	    right: -50px;
	    bottom: auto;
	    left: auto;
	    transform: rotate(45deg);
	    -webkit-transform: rotate(45deg);
	}
	.price-table {
	  position: relative;
	  width: 33%;
	  max-width: 50%;
	  float: left;
	  padding: 20px 0;
	  overflow: hidden;
	}

	.price-table .table-inner {
	  background-color: #ebebed;
	  padding: 40px 15px 50px;
	}

	.price-table .table-inner h3 {
	  margin: 0 auto 28px;
	}

	.price-table .table-inner .price {
	  font-size: 14px;
	  font-weight: 700;
	  text-transform: uppercase;
	  letter-spacing: 0.1em;
	  color: #26272d;
	  padding: 9px 18px;
	  border: 1px solid rgba(38, 39, 45, 0.2);
	  display: inline-block;
	  margin-bottom: 40px;
	  border-radius: 30px;
	  -moz-border-radius: 30px;
	  -webkit-border-radius: 30px;
	}

	.price-table .table-inner .billed {
	  font-size: 9px;
	  opacity: 0.8;
	  display: block;
	}

	.price-table .table-inner .phrase {
	  font-size: 14px;
	  line-height: 28px;
	  margin-bottom: 38px;
	  opacity: 0.6;
	}
	.price-table .table-inner .feature-list{
		margin: 0;
		padding: 0;
	}

	.price-table .table-inner .feature-list li {
	  font-size: 15px;
	  line-height: 24px;
	  color: @black;
	  margin-bottom: 12px;
	  list-style: none;
	}

	.price-table .table-inner .feature-list li i {
	  color: #6fc754;
	}

	.price-table .table-inner .feature-list li:last-child {
	  margin-bottom: 34px;
	}

	.price-table .table-inner .btn {
	  width: 210px;
	  max-width: 100%;
	}

	.price-table .table-inner .btn-blue {
	  background-color: transparent;
	  border: 1px solid #267df4;
	  color: #267df4;
	}

	.price-table.highlighted {
	  z-index: 2;
	  padding: 0;
	  box-shadow: 15px 25px 50px 0px rgba(92, 95, 101, 0.2);
	  -moz-box-shadow: 15px 25px 50px 0px rgba(92, 95, 101, 0.2);
	  -webkit-box-shadow: 15px 25px 50px 0px rgba(92, 95, 101, 0.2);
	}

	.price-table.highlighted .table-inner {
	  background-color: #ffffff;
	  padding: 60px 15px 70px;
	}

	.price-table.highlighted .btn-blue {
	  background-color: #267df4;
	  color: #ffffff;
	}

	#price_tables .monthly, #price_tables .yearly {
	  position: relative;
	  width: 100%;
	  opacity: 0;
	  -webkit-transform: scale(0.95);
	          transform: scale(0.95);
	  transition: opacity 0.97s, -webkit-transform 0.97s;
	  transition: opacity 0.97s, transform 0.97s;
	  transition: opacity 0.97s, transform 0.97s, -webkit-transform 0.97s;
	  transition-timing-function: cubic-bezier(0.545, 0, 0.05, 1);
	}

	#price_tables .monthly .price-table, #price_tables .yearly .price-table {
	  display: none;
	}

	#price_tables .monthly.active, #price_tables .yearly.active {
	  opacity: 1;
	  -webkit-transform: scale(1);
	          transform: scale(1);
	}

	#price_tables .monthly.active .price-table, #price_tables .yearly.active .price-table {
	  display: block;
	}	
}
section#faq{
	padding: 50px 10px;
	h1{
		margin-bottom: 25px;
		font-size: 28px;
	}
	.faq-list {
		margin-bottom: 20px;
		h2{
			font-size: 15px;	
			font-weight: 700;		
		}
		p{
		  margin-top: 24px;
		  color: lighten(@black, 40%);
		}
		i{
			color: lighten(@secondary, 25%);
			margin-right: 10px;
		}
	}
}
// Checkout
section#checkout{
	margin: 30px 0;
	ul{
		list-style: none;
		padding: 10px 0;
		li{
			margin-bottom: 10px;
			&.total{
				border-top: 1px solid lighten(@black, 40%);
				padding-top: 5px;
			}
		}
	}
	.info{
		color: lighten(@black, 45%);
	}
	.StripeElement {
	  background-color: white;
	  height: 40px;
	  padding: 10px 12px;
	  border-radius: 4px;
	  border: 1px solid transparent;
	  box-shadow: 0 1px 3px 0 #e6ebf1;
	  -webkit-transition: box-shadow 150ms ease;
	  transition: box-shadow 150ms ease;
	}

	.StripeElement--focus {
	  box-shadow: 0 1px 3px 0 #cfd7df;
	}

	.StripeElement--invalid {
	  border-color: #fa755a;
	}

	.StripeElement--webkit-autofill {
	  background-color: #fefde5 !important;
	}	
}
// Buttons
.btn{
	border:0;	
	&.btn-lg{
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
	&.btn-primary{
		background: @black;
		&:hover{
			background: darken(@black, 10%);
		}
	}
	&.btn-secondary{
		background: @secondary;
		background-image: -moz-linear-gradient(45deg, @violet 0%, @secondary 100%);
    background-image: -webkit-linear-gradient(45deg, @violet 0%, @secondary 100%);
    background-image: -ms-linear-gradient(45deg, @violet 0%, @secondary 100%);					
		color: #fff;
		font-weight: 700;
		box-shadow: 0 4px 10px lighten(@secondary, 40%); 
		&:hover{
			background: darken(@secondary, 10%);
		}		
		&:focus, &:active{
			box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2);
		}			
	}
	&.btn-danger{

	}
	&.btn-success{

	}
	&.btn-round{
		.border-radius(50px);
	}
}

.addmargin{
	margin-top: 30px;
}
.analytics{
	padding: 30px 0;
	#country-list{
		margin: 0;
		padding: 0 20px;
		li{
			margin-bottom: 10px;
		}
	}
	#referrer{
		margin: 0;
		padding: 0px;
		li{
			list-style: none;
			margin-bottom: 10px;
		}			
	}
}	
.custom-splash{
	margin-top: 30px;
	overflow: hidden;
	.banner{
		img{
			width: 100%;
		}
	}
	.custom-message .c-avatar {
	  float: left;
	  width: 100px;
	  margin-right: 10px;
	  margin-left: 3px;
	}
	.custom-message .c-message {
	  padding: 10px;
	  float: left;
	  height: 100px;
	  line-height: 25px;
	  border-radius: 2px;
	  -moz-border-radius: 2px;
	  -webkit-border-radius: 2px;
	}
	.custom-message .c-message h2 {
		margin-top: 2px;
	  margin-bottom: 5px;
	  font-size: 18px;
	}
	.custom-message .c-countdown {
	  float: right;
	  font-size: 12px;
	  text-align: center;
	  padding: 25px;
	}
	.custom-message .c-countdown span {
	  font-size: 30px;
	  display: block;
	}
}
.sp-replacer {
    border: solid 1px #a9a9a9;
    background: #fff;
    border-radius: 3px;
}
.custom-overlay{
	overflow: hidden;	
	.custom-message{
		position: relative;
		margin: 10px;
		background-color: @blue;
		color: #fff;
		padding: 15px 35px 15px 15px;	
		max-width: 320px;
		overflow: hidden;
		box-shadow: 0 0 50px lighten(#999, 10%);		
		.border-radius(5px);
		.custom-label{
			position: absolute;
			background-color: #fff;
			top: 13px;
			right: -20px;
			color: #000;
			padding: 0 20px;
			font-size: 11px;
			font-weight: 700;
			width: 75px;
			height: 15px;
	    -ms-transform: rotate(45deg);
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
		}
		p{
			color: #fff;
		}
		.btn{
			background-color: #fff;
			font-weight: 700;			
			&:hover{
				color: #000;
			}
		}
	}
}
#main-overlay{
	position: relative;
	#site{
		position: absolute;
		z-index: 0;
	}
	.custom-message{
		z-index: 99999;
		bottom: -500px;
		position: absolute;
		margin: 10px;
		background-color: @blue;
		color: #fff;
		padding: 15px 35px 15px 15px;	
		max-width: 320px;
		width: 100%;
		overflow: hidden;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);	
		.border-radius(5px);		
		&.tl{
			top: 0;
			left: 0;
			bottom: auto;
			transform: translatey(10px);
	    animation: showdown 1s ease-in;			
		}	
		&.tr{
			top: 0;
			right: 0;
			bottom: auto;
			transform: translatey(10px);
	    animation: showdown 1s ease-in;				
		}		
		&.br{
			bottom: 0;
			right: 0;
			transform: translatey(-10px);
	    animation: showup 1s ease-in;			
		}	
		&.bl{
			bottom: 0;
			left: 0;
			transform: translatey(-10px);
	    animation: showup 1s ease-in;			
		}							
		.custom-label{
			position: absolute;
			background-color: #fff;
			top: 13px;
			right: -20px;
			color: #000;
			padding: 0 20px;
			font-size: 11px;
			font-weight: 700;
			width: 75px;
			height: 15px;
	    -ms-transform: rotate(45deg);
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
		}
		a.remove{
			color: #fff;
			position: absolute;
			bottom: 0;
			right: 3px
		}
		p{
			color: #fff;
		}
		.btn{
			background-color: #fff;
			font-weight: 700;
			&:hover{
				color: #000;
			}
		}
	}	
}
// Footer
footer{
	padding: 20px 0 20px;
	color: darken(@body_color, 45%);
	.languages{
		position: relative;
		clear: both;
		display: inline-block;
		text-align: left;
		.langs{
			width: 310px;
			display: none;
			padding: 5px;
			background: lighten(@black, 5%);
			position: absolute;
			bottom: 15px;
			right: 0;
			.border-radius(2px 2px 0 2px);
			a{
				width: 90px;
				color: #fff !important;
				display: block;
				float: left;
			}
		}		
	}	
	a{
		margin-left: 5px;
		padding: 2px 5px;
		&:hover,&.active{
			background-color: @black;
			color: #fff;
			.border-radius;
		}
	}	
}
// URL Shortener Form
#main-form{
	background: @mainForm;
	border: 1px solid darken(@mainForm, 10%);
	.border-radius(2px);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	select{
		color: #000;
		width: 100%;
		margin-top: 10px;
	}		
	.main-form{
		padding: 20px;
		border-bottom: 1px solid darken(@mainForm, 10%);	
		.input-group-addon{
			border-color: darken(@mainForm, 10%);
			font-size: 2.0em;
			color: @black;
			border-width: 0;
			padding: 0 10px;
		}
		.main-input{
			padding: 0 10px;
			border-width: 0;
			font-size: 2.3em;
			background: #fff;
			height: 43px;
			color: @black;
			.border-radius;
			.transition(0.2s);
			&.error,&.error:focus{
				color: @red;
			}
			&:focus{
				color: @black;
			}
			&:hover{
				color: @blue;
			}
		}
		.main-textarea{
			background-color: darken(@mainForm, 5%);
			color: @black;
			font-weight: 700;
			font-size: 1.3em;
			padding: 10px;
			box-shadow: none;
			border: 0;
			.border-radius(3px);
		}
		.main-button{
			padding: 5px 15px;
			font-size: 18px;
			height: 43px;
			background-color: @blue;
			border: 0;
			.border-radius(100px);
			box-shadow: 0 5px 10px rgba(0,0,0,0.15) !important;			
			&#copyurl{
				margin-top: 0 !important;
				background-color: @green;
				display: none;
			}			
			&:focus, &:active{
				box-shadow: inset 0 5px 10px rgba(0,0,0,0.15) !important;			
			}
		}
	}
	.advanced{
		.border-radius(100px);
		font-size: 12px;
		float: left;
	}	
	.main-options{
		padding: 10px 20px;
		.chosen-container{
			margin-left: 10px;
			max-width: 150px;
			float: right;
			.chosen-single{
				background: @blue;
				color: #fff;
				border: 0;
			}
		}
	}
	.main-advanced{
		padding: 20px;	
		background: @mainForm;
		color: @black;
		& > div > div{
			margin-bottom: 20px;
		}
		.btn-xs{
			padding: 2px 10px;			
			.border-radius(100px);
		}
		h3{
			font-size: 1.1em;
			font-weight: 700;
			color: @black;
			margin-top: 0;
			margin-bottom: 20px;
		}
		p{
			font-size: 0.9em;
			color: lighten(@black, 55%); 
			margin-bottom: 15px;
		}
		input{
			color: lighten(@black, 5%);
		}
		#geo, #device{
			padding-top: 35px;
			select{
				max-width: 200px;
			}
			.chosen-single{
				.border-radius(0 2px 2px 0);
			}
			.geo-input .row, .device-input .row{
				margin-bottom: 10px;
			}
		}
		.chosen-container-multi .chosen-choices{
	    padding: 6px 0;
	    border: 1px solid #ccc;
		}
		.chosen-container-active .chosen-choices{
			box-shadow: none;
		}
		.chosen-container-multi .chosen-choices li.search-choice{
			padding: 5px 25px 5px 8px;
			margin: 0px 0 0px 5px;
		}
	}
}
// Share
.share-this{
	margin-top: 30px;
	overflow: hidden;	
	.qr{
		float: right;
		img{
			max-width: 80px
		}
	}
}
// Custom toggles
ul.form_opt{
	list-style: none;
	padding: 0;
	clear:both;
	overflow: hidden;
	margin-bottom: 25px;
	min-height: 60px;
	li{
		float: right;
		margin-top: 15px;
		&.text-label{
			width: 60%;
			float: left;
			color: @black;
			font-weight: 700;
			text-align: left;			
			margin-top: 0;
			font-size: 13px;			
			small{
				display: block;
				margin-top: 5px;
				color: #777; 
				font-weight: 400;
			}		
		}
		a{
			background: @black;
			color: #fff;
			padding: 5px 10px;
			font-weight: 700;
			border: 0;
			.transition;
			&.round{
				.border-radius;
			}
			&.first{
				.border-radius(2px 0 0 2px);
			}
			&.last{
				.border-radius(0 2px 2px 0);
			}
			&:hover{
				background: lighten(@blue,10%);
			}
			&.current{
				background: @blue;
			}
		}
	}
}
// Modal
#modal-shadow{
  background: lighten(@black,5%);
  background: rgba(0,0,0,0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 200;
  display: none;
  clear: both;   
}
#modal-alert{
    width: 90%;
    max-width: 500px;
    min-height: 150px;
    position: fixed;
    z-index: 999;
    display: none;
    background: #fff;
    text-align: left;
    padding: 10px;
    clear: both; 
    color:#222;
    .border-radius;
    form{
    	overflow: visible !important;
    }
    .title{
    	margin:-10px -10px 10px -10px;
    	padding: 10px;
    	display: block;
    	background: @black;
    	color: #fff;
    	font-weight: 700;
    	.border-radius(2px 2px 0 0);
    }
    &>p{
    	margin: 10px 0;
    	line-height: 25px;
    }    
}
.flat .plan {
  .border-radius();
  list-style: none;
  padding: 0 0 20px;
  margin: 50px 0 15px;
  border: 0;
  background: @blue;
  text-align: center;
  .transition;
	&:hover{
	  background: lighten(@blue, 10%)
	}  		  
	li {
	  padding: 10px 15px;
	  color: #fff;
	  font-weight: 700;
		.transition;
	}
	li.plan-price {
	  border-top: 0;
	}
	li.plan-name {
	  .border-radius(2px 2px 0 0);
	  padding: 15px;
	  font-size: 18px;
	  line-height: 18px;
	  color: #fff;
		background: darken(@black, 10%);
	  margin-bottom: 30px;
	  border-top: 0;
	}
	li > strong {
	  color: darken(@black, 10%);
	}
	li.plan-action {
	  margin-top: 10px;
	  border-top: 0;
	}
	&.featured li.plan-name {
	  background: darken(@black, 25%);
	}
	&.featured:hover li.plan-name {
	  background: darken(@black, 5%);
	}
	&.featured li.plan-price{
		font-size: 20px;
		padding: 15px 0; 
		background: @black;		
		margin: 0 10% 20px 10%;	
		.border-radius;
		strong{
			font-size: 35px;
			color: #fff;
			display: block;
		}
	}
}
#captcha{
	padding: 15px;
}
#recaptcha_widget_div{
	background: #fff;
	margin-bottom: 10px;
	.border-radius;
	.recaptchatable {
		border: 0px solid transparent !important;
		.recaptcha_image_cell {
			background: transparent;
			center img {
		  	width: 250px;
		  	height: 54px;
			}
		}
		#recaptcha_response_field{
			background: @black;
			color: #fff;
			padding: 5px 8px;
		}
	}	
}
#recaptcha_logo,#recaptcha_privacy{
	display: none;
}
@media screen and (max-width:990px){
  #main-form .main-form .col-sm-10{
    margin-bottom: 10px;
  }	
  section .sidebar{
		min-height: 150px !important;  	
  	height: auto;
  }	
  body .is404 h1 {
    font-size: 12em !important;
    line-height: 1em!important;
  }		
	body .is404 h2 {
    font-size: 35px !important;
    line-height: 1em!important;
  }		  
	ul.form_opt{
		li{
			float: left;
			&.text-label{
				display: block;
				float: none;
				width: 100%;
				small{
					display: none;
				}
			}
			a{
				&.first{
					.border-radius(0 2px 2px 0);
				}
				&.last{
					.border-radius(2px 0 0 2px);
				}				
			}
		}
	}
  .main-advanced .col-sm-4{
		padding-bottom: 10px;
  }
	body .rand div > i{
		font-size: 2.5em;
	}  
} // End Tablet
@media screen and (max-width:450px){
	header{
		.navbar-brand{
			font-size: 1.2em !important;
		}
	}
	header .navbar .nav li{
		margin: 0;
	}
  body .is404 h1 {
    font-size: 12em !important;
    line-height: 1em!important;
  }		
	body .is404 h2 {
    font-size: 20px !important;
    line-height: 1em!important;
  }		  
  section .sidebar{
  	height: auto;
  }
	#main-form{
		.col-sm-10{
			border-bottom: 1px solid #eee;
		}
		.main-form {
			.main-input{
				font-size: 1.5em;

			}
			.input-group-addon{
				font-size: 1.5em;
			}
			.main-button {
				margin-top: 10px;
				font-size: 13px;
				width: auto;
				padding: 8px 15px;
				height: auto;
			}
		}
	}
	footer{
		.text-right{
			text-align: left !important;
			margin-top: 10px;
			a{
				&:first-child{
					margin-left: 0;
				}
			}
		}
	}
	#recaptcha_table > tbody > tr:nth-child(1) > td:nth-child(2) {
		display: none;
	}	
	.recaptcha_input_area{
		width: 77% !important;
		input{
			width: 100% !important;
		}
	}
	#recaptcha_image{
		width: 104% !important;
		img{
			width: 100% !important;
		}
	}
	section .panelette{
		margin-bottom: 15px;
	}
	body .rand{
		margin-bottom: 100px;
	}
	body .rand div > i{
		font-size: 2.5em;
	}
	body .rand .rand1{
		top: -10%;
	}
	body .rand .rand2, body .rand .rand5{
		left: 5%;
	}
	body .rand .rand4{
		top: 50%;
	}
	body .rand .rand6{
		left: 75%;
	}
	section .stats h3 span{
		display: block;
	}
	section#plan #price_tables .price-table{
		width: 100% !important;
		max-width: 100% !important;
	}
} // End Mobile
	.float-away {
	  position: relative;
	}
	.float-away:after {
	  content: attr(href);
	  position: absolute;
	  left: 0;
	  top: 0;
	  display: block;
	}
	.float-away:after {
	  -webkit-animation-duration: 2s;
	  animation-duration: 2s;
	  -webkit-animation-name: float-away;
	  animation-name: float-away;
	  -webkit-animation-timing-function: ease-out;
	  animation-timing-function: ease-out;
	}	
	@keyframes float-away {
    from {
    	opacity: 1;
    	top: 0;
    }
    to {
    	top: -30px;
    	opacity: 0.1;
    }
	}
 ul.doughnut-legend {
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  margin-top: 30px;
}
ul.doughnut-legend li {
  display: inline-block;
  margin-right: 10px;
}
ul.doughnut-legend li span {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 2px;
}	

#detect-app {
  background: #fff;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
		h3 {
	    max-width: 430px;
	    width:  100%;
	    margin: 100px auto;
	    text-align: center;
	    font-size: 35px;	    
	  }
		span {
	    display:  block;
	    font-size: 20px;
	    margin-top: 15px;
		}	  
}
.btn-group{
	&.addmargin{
		margin-top: 23px;
	}
}
@keyframes showdown{
	0% {
	  transform: translatey(-300px);
	}
	100% {
	  transform: translatey(10px);
	}
}
@keyframes showup{
	0% {
	  transform: translatey(300px);
	}
	100% {
	  transform: translatey(-10px);
	}
}
// Custom Functions
.border-radius(@radius: 2px){
  	border-radius: @radius;
  	-moz-border-radius: @radius;
  	-webkit-border-radius: @radius;
}
.transition(@time:0.5s,@animation:linear,@property:all){
	transition:@property @time @animation;
	-webkit-transition:@property @time @animation;
	-o-transition:@property @time @animation;
	-ms-transition:@property @time @animation;
	-moz-transition:@property @time @animation;
}
.gradient(@start,@stop, @deg: 270deg){
	background: -moz-linear-gradient(@deg, @start 0%, @stop 100%);
	background: -webkit-linear-gradient(@deg, @start 0%,@stop 100%);
	background: linear-gradient(@deg, @start 0%,@stop 100%);
}